<template>
  <div class="orderItremList">
    <div class="wrap">
      <div class="hd" v-show="!loading">
        <img class="icon" src="../assets/image/car.png"/>
        <div class="th">
          <span class="carNo">{{vcs.carNo}}</span>
          <label class="time">{{vcs.createTime}}</label>
        </div>
      </div>
      <loading v-show="loading" class="loading"></loading>
      <div class="item" v-for="o in obj" @click="orderItemDetail(o)">
        <div class="hd">
          <span class="orderNo">订单编号{{o.violation_id}}</span>
          <span class="icon"> [查看详情] </span>
        </div>

        <div class="bd">
          <p class="position">{{o.viloation_location}}</p>
          <p class="desc">{{o.viloation_detail}}</p>
          <p class="cont">
            <span class="time">{{o.violation_time}}</span>
            <span class="money">金额:￥{{o.total_amount}}</span>
          </p>
        </div>
        <div class="ft"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import * as API from '../assets/js/API.js'
  import Loading from '../components/Loading.vue'
  export default {
    components: {
      Loading
    },
    data () {
      return {
        access_token: window.localStorage.getItem('accessToken'),
        openid: window.localStorage.getItem('openid'),
        orderNo: this.$route.params.orderNo,
        carNo: this.$route.params.carNo,
        obj: {},
        vcs: {},
        loading: true // 加载框
      }
    },
    created () {
      this.orderItemList()
    },
    methods: {
      navTo (link) {
        this.$router.push({path: link})
      },
      orderItemList () {
        let param = {
          orderNo: this.orderNo,
          openid: this.openid,
          carNo: this.carNo
        }
        this.$http.post(API.OrderItemList, {access_token: this.access_token, param: JSON.stringify(param)}).then(
          (resp) => {
            this.loading = false
            let msg = resp.body.msg
            let data = resp.body.data
            if (msg === 'OK') {
              this.obj = data.orderInfo
              this.vcs = data.vcs
            } else {
              this.$Message.info(msg)
            }
          }
        )
      },
      orderItemDetail (v) {
        this.navTo('/orderItemDetail/' + v.id + '/' + v.order_no)
      }
    },
    filters: {
      timeFilter (v) {
        if (!v) return
        var now = new Date()
        now.setTime(v)
        let y = now.getFullYear()
        let m = now.getMonth() + 1
        let d = now.getDate()
        let h = now.getHours()
        let mm = now.getMinutes()
        let s = now.getSeconds()
        return y + '-' + (m < 10 ? '0' + m : m) + '-' +
         (d < 10 ? '0' + d : d) + '   ' + (h < 10 ? '0' + h : h) + ':' + (mm < 10 ? '0' + mm : mm) + ':' + (s < 10 ? '0' + s : s)
      }
    }
  }
</script>
<style lang="scss">
  @import '../assets/style/common.scss';
  .orderItremList{
    .wrap{
      padding: px2rem(20px) 0;
      font-size: px2rem(24px);
      >.hd{
        background-color: #fff;
        height: px2rem(100px);
        width: 100%;
        box-shadow: 0 0 10px 0 rgba(155,143,143,0.6);
        -webkit-box-shadow: 0 0 10px 0 rgba(155,143,143,0.6);
        .icon{
          float: left;
          width: auto;
          height: px2rem(80px);
          padding: px2rem(10px);
          margin: px2rem(10px);
          /*background-color: antiquewhite;*/
        }
        .th{
          float: left;
          margin: px2rem(20px);
          .carNo {
            display: block;
            font-size: px2rem(24px);
            color: #35b41c;
            font-weight: bold;
          }
          .time{
            display: block;
          }
        }
      }
      >.item{
        width: 100%;
        /*height: px2rem(250px);*/
        margin-top: px2rem(20px);
        background-color: #fff;
        padding: px2rem(10px);
        box-shadow: 0 0 10px 0 rgba(155,143,143,0.6);
        -webkit-box-shadow: 0 0 10px 0 rgba(155,143,143,0.6);
        clear: both;
        .hd{
          width: 100%;
          height: px2rem(70px);
          line-height: px2rem(70px);
          padding-left: px2rem(10px);
          border-bottom: 1px solid silver;
          font-size: px2rem(26px);
          .icon{
            float: right;
            margin-right: px2rem(30px);
            /*font-size: px2rem(20px);*/
            color: yellowgreen;
          }
        }
        .bd{
          p{
            /*height: px2rem(30px);*/
            line-height: px2rem(30px);
            margin: px2rem(20px) px2rem(10px);
            font-size: px2rem(24px);
          }
          .position{
            font-size: px2rem(26px);
            /*margin: px2rem(10px) px2rem(20px);*/
            color: #35b41c;
          }
          .desc{
            /*height: px2rem(60px);*/
          }
          .money{
            float: right;
            margin-right: px2rem(20px);
            color: red;
          }
        }
      }
    }
  }
</style>
